<template>
    <div>
      <el-table :data="tableData" style="width: 100%" >
        <el-table-column label="角色名称">
          <template #default="scope">
            <el-popover
                placement="right"
                title="权限列表"
                :width="200"
                trigger="hover"
                @before-enter="handleHover(scope.row)"
            >
              <template #reference>
                <el-button class="m-2">{{scope.row.roleName}}</el-button>
              </template>
              <template #default>
                <el-tree
                    :data="rightsList"
                    :props="defaultProps"
                    :default-expand-all="true"
                    :render-content="renderContent"
                />
              </template>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template #default="scope">
            <el-button type="primary" round @click="handleUpdate(scope.row)">更新</el-button>
            <el-popconfirm
                title="确认删除此角色?"
                confirm-button-text="确认"
                cancel-button-text="取消"
                @confirm="handledelete(scope.row)"
            >
              <template #reference>
                <el-button type="danger" round>删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
<!--修改角色权限弹出框-->
      <el-dialog v-model="dialogVisible" title="修改角色权限"  width="30%">
        <el-form
            ref="updateFormRef"
            :model="updateForm"
            :rules="rules"
            label-width="80px"
            class="demo-ruleForm"
            status-icon
        >
          <el-form-item label="角色名称:" prop="roleName">
            <el-input v-model="updateForm.roleName"/>
          </el-form-item>
          <el-form-item label="角色权限:" prop="rights">
            <el-tree
                :data="rightsList"
                :props="defaultProps"
                show-checkbox
                node-key="path"
                ref="treeRef"
                :check-strictly="true"
            />
          </el-form-item>
        </el-form>
        <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleConfirm(updateFormRef)">
          确认
        </el-button>
      </span>
        </template>
      </el-dialog>
    </div>
</template>

<script setup>
import {reactive,nextTick,ref,onMounted} from "vue";
import axios from "axios";

//渲染表格
const tableData = ref([])
const rightsList=ref([])
//获取角色表
onMounted(()=>{
  getList()
  getRightsList()
})
const getList=async ()=>{
  var res=await axios.get("/adminapi/roles")
  tableData.value=res.data
}
const getRightsList=async ()=>{
  var res=await axios.get("/adminapi/rights")
  rightsList.value=res.data
}
const defaultProps={
  children:'children',
  label:'title',
}

//自定义树型节点内容
const renderContent = (
    h,
    {
      node,
      data,
      store,
    }
) => {
  return h(
      'span',
      {
        class: `custom-tree-node ${currentRights.value.includes(data.path)?'active':''}`,
      },
      h('span', null, node.label)
  )
}
const currentRights=ref([])
const handleHover=({rights})=>{
  currentRights.value=rights
}

//更新角色权限
const handleUpdate=(item)=>{
  dialogVisible.value=true
  updateForm.roleName=item.roleName
  currentItem.value=item
//设置rights给tree
  nextTick(()=>{
    treeRef.value.setCheckedKeys(JSON.parse(item.rights))
  })

}

//更新权限内容提示框
const dialogVisible=ref(false)
const updateFormRef=ref()
const currentItem=ref({})
const updateForm=reactive({
  roleName:''
})
const rules=reactive({
  roleName: [
    { required: true, message: '请输入角色名', trigger: 'blur' },
  ],
})
//更新tree
const treeRef=ref()
//更新角色权限弹出框确认
const handleConfirm=async ()=>{
  await axios.put(`/adminapi/roles/${currentItem.value.id}`,{
    roleName:updateForm.roleName,
    rights:JSON.stringify(treeRef.value.getCheckedKeys())
  })
  await getList()
  dialogVisible.value=false
}

//删除角色
const handledelete=async ({id})=>{
  await axios.delete(`/adminapi/roles/${id}`)
  await getList()
}

</script>

<style scoped>
:deep(.active){
  color: gold;
}
</style>